<template>
	<view class="citys">
			<view class="citys-main" v-for="(item,index) in citypre" :key="index">
				<view class="citys-num">{{item}}</view>
				<view class="texst">
					<view class="citys-city" v-for="city in getCities(item)" :key="city.id">
						<text class="citys-item" @click="choosecity(city.city_name)">{{city.city_name}}</text>
						
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import { $_citys } from "@/apis/index.js"
	export default {
		data() {
			return {
				cityList:[], 
				citypre:[]
			}
		},
		// 请求城市接口
		onLoad() {
			$_citys().then(res=>{ 
				// city_name: "信阳"
				// city_pinyin: "Xinyang"
				// city_pre: "X"
				// city_short: "xy"
				// count: "20"
				// id: "101"
				
				// 对city_pre进行去重 小写变大写 再sort排序
				this.citypre=[...new Set(res.data.map(item=>item.city_pre.toUpperCase()).sort())]
				this.cityList=res.data
				// console.log(37,this.cityList);
				// console.log(17,this.citypre);
				// console.log(39,this.getCities("A"))
			})
			
		},
		methods:{
			// 用对应的字母过滤城市
			getCities(pre){
				return this.cityList.filter(item=>item.city_pre.toUpperCase()==pre.toUpperCase())
			}, 
			choosecity(item){ 
				console.log(49,item);
				this.$emit("changecity",item);
				uni.navigateTo({
					url:"/pages/index/index?item=item"
				})
			}
		}
	}
</script>

<style lang="scss">
.citys-main{
	// background-color: #f6f6f6;
	
}
.citys-num{
	padding-left: 10px; 
}
.citys{
	background-color: #f6f6f6;
}
.texst{
	background-color: #fff;
	margin: 10px;
}
.citys-city{
	padding: 10px ; 
	background-color:#fff; 
	display: inline-flex; 
	justify-content: flex-start;
	align-items: center; 
	.citys-item{ 
	}
}

</style>
